<template>
    <div class="homeBox">
        <div ref="main" class="main"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import gl from "echarts-gl";
export default {
    data() {
        return {

        };
    },
    methods: {
    },
    components: {
    },
    mounted() {
        // 初始化echarts
        let myChart = echarts.init(this.$refs.main);
        // 地球数据显示
        let ds = []
        // 添加上面的配置项到地球上
        myChart.setOption({
            // 图例设置
            legend: {
                selectedMode: 'multiple',
                x: 'right',
                y: 'bottom',
                data: ds.map(item => {
                    return item.name // 数据来源
                }),
                padding: [0, 550, 140, 0], // 填充位置,上、右、下、左
                orient: 'vertical', // 排列方式，vertical:垂直排列
                textStyle: {
                    color: '#fff', // 文字颜色
                }
            },
            // 地球背景色
            backgroundColor: '#FFF',
            // 地球参数设置
            globe: {
                baseTexture: './image/bg5.png', // 地球表面覆盖的图片,可以替换成自己想要的图片
                shading: 'color', // 地球中三维图形的着色效果
                viewControl: {
                    autoRotate: true, // 是否开启视角绕物体的自动旋转查看
                    autoRotateSpeed: 3, //物体自转的速度,单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                    autoRotateAfterStill: 2, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
                    rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
                    targetCoord: [116.46, 39.92], // 定位到北京
                    maxDistance: 200,
                    minDistance: 200
                }
            },
        })
    },
}
</script>

<style scoped lang="less">
.homeBox {
    .main {
        width: 1200px;
        height: 630px;
    }
}
</style>
